<template>
	<view class="pb-60">
    <uni-steps :options="[{title: '填写资料'}, {title: '支付会员费'}, {title: '审核'}, {title: '完成认证'}]" :active="active_tag"></uni-steps>
    <view v-if="active_tag==0">
      <view class="info u-border-bottom">
        <span class="info-title">商家名称：</span>
        <u-input class="info-input" v-model="businese_name" />
      </view>
      <u-cell-item title="所在城市" class="active" :value="select_tips" @click="show=true"></u-cell-item>

      <view class="info u-border-bottom">
        <span class="info-title">详细地址：</span>
        <u-input class="info-input" v-model="address"  />
      </view>

      <view class="w100" style="height: 20rpx;background: #F8F8F8;"></view>
      <view class="info u-border-bottom">
        <span class="info-title">店主名称：</span>
        <u-input class="info-input" v-model="contact" />
      </view>
<!--      <view class="info u-border-bottom">-->
<!--        <span class="info-title">身份证号：</span>-->
<!--        <u-input class="info-input" v-model="id_card" />-->
<!--      </view>-->
      <view style="padding: 26rpx 32rpx;display: flex;flex-direction: row" class="u-border-bottom">
        <span style="width: 25%;height: 70rpx;line-height: 70rpx;font-weight: bold">联系方式：</span>
        <u-input style="width: 75%;height: 70rpx" v-model="contact_phone" />
      </view>
      <view class="w100" style="height: 20rpx;background: #F8F8F8;"></view>
      <view class="mlr-36">
        <view class="mt-40 size-32">
          上传证件
        </view>
        <view class="img text-center mt-30">
          <image :src="img_url" mode="" @click="chooseImg"></image>
        </view>
        <view class="size-28 text-center mt-10">
          点击上传<text class="ml-10" style="color: #FF5C50;">工商营业执照</text>
        </view>
      </view>
      <view class="center mt-40">
        <view class="radio center">
          <view class="radio-circle">

          </view>
        </view>
        <view class="size-26 ml-10">
          阅读并同意商家服务须知
        </view>
      </view>
      <u-button type="primary" :disabled="!businese_name || !province || !contact || !contact_phone || !img_id" class="mt-60" @click="submit">提交审核</u-button>
      <!-- 选择地区 -->
      <u-picker v-model="show" mode="region" @confirm="confirm"></u-picker>
    </view>

    <view class="box" v-if="active_tag==1">
      <view class="mt-85 text-center size-26">
        <text class="mr-10">支付金额</text>
<!--        <u-count-down :timestamp="time" font-size="26"></u-count-down>-->
      </view>
      <view class="yellow bold mt-15 text-center">
        <text>￥</text>
        <text class="size-40">{{price}}</text>
      </view>
      <view class="bg-white pt-30 mt-80">
        <view class="size-34 bold plr-36 mb-20">
          支付方式
        </view>
        <view class="plr-36">
          <u-radio-group active-color="#00C28E">
<!--            <u-radio name="1" class="w100 bb ptb-30">-->
              <view class="flex_l">
                <image style="width: 55rpx;height: 55rpx; margin-right: 20rpx;" src="../../../static/wx.png" mode=""></image>
                微信支付
              </view>
<!--            </u-radio>-->
          </u-radio-group>
        </view>
      </view>
      <view class="fixed-bottom pd-36">
        <u-button type="primary" @click="buildOrder">确认支付</u-button>
      </view>
    </view>

    <view class="box" v-if="active_tag==2" style="margin-top: 30%">
      <view class="mt-85 text-center size-26">
        <view style="width: 100%;"><u-image style="text-align: center;width: 64rpx;height: 64rpx;margin: 0 auto" src="../../../static/icon-auth-doing.png"></u-image></view>
        <view style="margin-top: 20rpx;color: #747575;font-size: 30rpx"><text class="mr-10">已成为平台会员，资料审核中...</text></view>
      </view>
    </view>

    <view class="box" v-if="active_tag==3" style="margin-top: 30%">
      <view class="mt-85 text-center size-26">
        <view style="width: 100%;"><u-image style="text-align: center;width: 64rpx;height: 64rpx;margin: 0 auto" src="../../../static/icon-auth-complete.png"></u-image></view>
        <view style="margin-top: 20rpx;color: #747575;font-size: 30rpx"><text class="mr-10">尊敬的会员您好，您的商家资料审核成功！</text></view>
      </view>
    </view>
	</view>
</template>

<script>
	import {upload} from '../../../common/common.js'
	import plateInput from '@/components/uni-plate-input/uni-plate-input.vue';
	export default {
		data() {
			return {
				img_url:'../../../static/model-yyzz.png',
        img_id:0,
				show:false,
				submitbtn:true,
        businese_name:'',
        address:'请选择',//居住地
        contact:'',
        id_card:'',
        contact_phone:'',
        province:'',
        city:'',//报名城市
        area:'',
        select_tips:'请选择',
        price:99.00,
        active_tag:0,
        allUserInfo:''
			}
		},
		components: {
			plateInput
		},
		onLoad() {
			uni.$on('brand',res=>{
				console.log(res);
				this.brand = res.brand
				this.name = res.name
				this.model = res.brand + ' ' + res.name
				this.isbrand = false
			})
		},
    onShow(){
      this.getUserInfo()
    },
		methods: {
      getUserInfo(){
        this.$http('/api/ucenter/getUserInfo',{}, "GET").then(res => {
          this.allUserInfo = res
          if (res.shop_auth == 0){
            this.active_tag=1
          }else if(res.shop_auth == 2){
            this.active_tag=2
          }else if(res.shop_auth == 1){
            this.active_tag=3
          }
        })
      },
			confirm(e){
        this.province = e.province.label
        this.city     = e.city.label
        this.area     = e.area.label
        if(e.province.label == "北京市" || e.province.label == "天津市" || e.province.label == "上海市" || e.province.label == "重庆市"){
          this.select_tips = e.province.label + '-' + e.area.label
        }else{
          this.select_tips = e.province.label + '-' + e.city.label + '-' + e.area.label
        }
			},
			chooseImg(){
				upload().then(data=>{
          console.log(data)
					this.img_id = data[0].img_id
					this.img_url = data[0].img_url
				})
			},
			submit(){
				if(this.submitbtn == true){
					this.submitbtn = false
					this.$http('/api/ucenter/setBusinessAuthInfo',{
						name: this.businese_name,
						province: this.province,
						city: this.city,
						area: this.area,
						address: this.address,
						contact: this.contact,
						contact_phone: this.contact_phone,
            business_license_img_id: this.img_id
					},"POST").then(data=>{
						// this.$store.dispatch('updateUserInfo')
						uni.showToast({
							title: '提交成功,请耐心等待',
							icon:'none'
						})
            this.getUserInfo();
						// setTimeout(()=>{
						// 	uni.navigateBack({})
						// },1000)
					}).catch(data=>{
						this.submitbtn = true
					})
				}
			},
      buildOrder(){
        // const _this = this
        this.$http('/api/ucenter/buildVipOrder', {}, "POST").then(res => {
          this.pay(res.order_num);
        });
      },
      pay(orderNum){
        console.log(orderNum)
        try {
          uni.showLoading({
            title: '准备支付中',
            mask: true
          });
          this.$http('/api/payment/weChatPayment', {
            order_num: orderNum,
          }, "POST").then(data => {
              const _this = this
              this.$JSSDK.config({
                debug: false,
                appId: data.appId,
                timestamp: data.timeStamp,
                nonceStr: data.nonceStr,
                signature: data.signature,
                jsApiList: ["chooseWXPay"]
              })
              this.$JSSDK.ready(function () {
                _this.$JSSDK.chooseWXPay({
                  appId: data.appId,
                  timestamp: data.timeStamp,
                  nonceStr: data.nonceStr,
                  package: data.package,
                  signType: data.signType,
                  paySign: data.paySign,
                  success: function (res) {
                    uni.hideLoading()
                    showToast('支付成功', 'success');
                    _this.qiangDan(_this.order_id)
                    // _this.handleRecordList()
                  },
                  fail: function (error) {
                    console.error(error)
                    uni.hideLoading()
                    showToast('支付失败', 'none')
                  }
                })
              })

          });
        } catch (err) {
          showToast("支付失败", "none");
        } finally {
          uni.hideLoading()
        }
      }
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-btn{
		height: 96rpx !important;
	}

	/deep/.u-primary-hover {
		background-color: $blue !important;
	}

	/deep/.u-btn--primary--disabled {
		background-color: $bg-1 !important;
	}
	.active{
		/deep/.u-cell__value {
			color: $gray !important;
		}
	}
	.input{
		input{
			text-align: right;
			font-size: 26rpx;
		}
	}
	.img{
		image{
			width: 398rpx;
			height: 254rpx;
		}
	}
	.radio{
		width: 30rpx;
		height: 30rpx;
		border-radius: 50%;
		border: 1rpx solid #999;
		.radio-circle{
			width: 22rpx;
			height: 22rpx;
			background: $blue;
			border-radius: 50%;
		}
	}

  .info{
    padding: 26rpx 32rpx;display: flex;flex-direction: row;

    .info-title{
      width: 25%;height: 70rpx;line-height: 70rpx;font-weight: bold;
    }
    .info-input{
      width: 75%;height: 70rpx;
    }
  }

  /deep/.u-primary-hover {
    background: linear-gradient(to right,#00b6b4,#00d496) !important;
  }
  /deep/.u-radio {
    display: flex;
    flex-direction: row-reverse;
  }

  /deep/.u-radio-group {
    width: 100% !important;
  }

  /deep/.u-radio__label {
    width: 100%;
  }
</style>
